import {View, Text, Button} from 'react-native';
import {useContext, createContext, useState} from 'react'; // 导入需要的钩子和API

// 定义Context类型接口
interface NumContextType {
  num: number;
  setNum: (num: number) => void;
}

// 创建一个Context对象，并提供初始默认值
const numContext = createContext<NumContextType | null>(null);

export default function App() {
  // 定义要共享的状态
  const [num, setNum] = useState(0);

  return (
    <View>
      {/* 
        使用Provider提供值，将num和setNum打包成一个对象传递给后代组件
        这样任何被包裹的子组件都可以访问这些值
      */}
      <numContext.Provider value={{num, setNum}}>
        <Son />
      </numContext.Provider>
    </View>
  );
}

const Son = () => {
  // 使用useContext钩子获取在Provider中提供的值
  const context = useContext(numContext);
  return (
    <View>
      {/* 使用context中的状态和更新函数 */}
      <Button
        title={context?.num?.toString() || '0'}
        onPress={() => context?.setNum(context?.num + 1)} // 更新共享状态
      />
      <Text>{context?.num}</Text>
    </View>
  );
};
